<template>
	<view class="content">
		<view class="header">	
			<navigation :title="'歌单'" class="navigation"></navigation>
			<view class="top">
				<view class="left">
	                <image :src="list.coverImgUrl">
					</image>
				</view>
				<view class="right">
                       <p class="biaoshengbang">{{list.name}}</p>
					   <p><image src="/static/images/wyytb.png" mode=""></image>网易云音乐</p>
					   <p>云音乐中每天热度上升最快的100首歌单,每日更新。></p>
				</view>
			</view>
			<view class="bottom">
				 <p>分享给微信好友</p>
			</view>
		</view>
		<view class="booum">
	          <ul>
	             <li v-for="(item,index) in list.tracks" :key="index" @click="navPlayer(item.id)">
	          	      <text>{{index+1}}</text>
					  <text>
					      <p>
					      	{{item.name}}
					      </p>
					      <p>
					      	<image src="../../static/images/dujia.png"></image>{{item.ar[0].name}}-{{item.name}}
					      </p>
					  </text>
	             </li>
	          </ul>
		</view>
	</view>
</template>

<script>
	import {listDetail} from "../../request/request.js"
	export default {
		data() {
			return {
				title: '播放页面',
				list:[],
				listid:"",
			}
		},
		onLoad(option) {
			listDetail(option.listid).then((res)=>{
				console.log(res.data),
				this.list=res.data.playlist
			});
		},
		methods: {
               navPlayer(songId){
				   uni.navigateTo({
				   	url:'/pages/player/player?songId='+songId,
				   })
			   }
		}
	}
</script>

<style>
	*{
	    margin: 0px;
		padding: 0px;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.header {
		box-sizing: border-box;
		width: 100%;
		height: 600rpx;
		padding: 20rpx 30rpx;
		background-color: #d27aa2;
		box-shadow: inset 0 0rpx 30rpx 5rpx white;
		
	}
	.header .top{
		display: flex;
	}
    .header .left image{
		width: 280rpx;
		height: 280rpx;
		border-radius: 30rpx;
	}
	.header .right {
		box-sizing: border-box;
		padding: 0rpx 40rpx 40rpx;
		width: 100%;
		height: 300rpx;
		border-radius: 30rpx;
		font-size: 25rpx;
		color: white;
	}
	.header .right image{
		width: 65rpx;
		height: 65rpx;
		vertical-align: middle;
	}
	.header .right .biaoshengbang{
		font-size: 40rpx;
		color: white;
	}
	.header .right p{
		margin-bottom: 40rpx;
	}
	.header .right p:nth-child(2)
	{
		font-size: 32rpx;
		color: white;
		opacity: 0.8;
	}
	.header .right p:nth-child(3)
	{
		opacity: 0.5;
	}
	.header .bottom{
		margin: 0 auto;
		width: 350rpx;
		height: 60rpx;
		background-color: rgba(211, 211, 211, 0.2); /* 使用 rgba 设置颜色及透明度 */
		border-radius: 30rpx;
		text-align: center;
	}
	.header .bottom p{
		line-height: 60rpx;
		color: white
	}	
	
	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.booum ul{
		 margin-top: 50rpx;
		 list-style: none;
	}
	.booum li{
		display: flex;
		
	}
	.booum li text:first-child{
	   display: flex;
	   width: 100rpx;
	   height: 100rpx;
	   line-height: 50rpx;
	   justify-content: center;
	   color: #ccc;
	}
	.booum li text:last-child{
		flex: 1;
	}
	.booum li text:last-child p:first-child{
		font-weight: 700;
	}
	.booum li text:last-child p:last-child{
		font-weight: 400;
		font-size: 16rpx;
	}
	.booum li text:last-child p:last-child image{
		width: 25rpx;
		height: 25rpx;
		margin-right: 15rpx;
	}
	.navigation{
		width: 100%;
		background-color: #d27aa2;
		padding: 50rpx 0;
	}
</style>